<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>事件修饰符</title>
    <style>
        div#inner{
            height: 200px;
            width: 200px;
            background-color: aqua;
            margin: 0 auto;
        }
        div#outer{
            height: 300px;
            width: 300px;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <!-- 事件修饰符
        prevent  // 阻止默认事件
        stop     // 阻止事件冒泡，事件默认从结点开始，一直冒泡到最外层<html></html>  e.stopPropagation();
        once     // 事件值触发一次
        capture  // 用于事件捕获
        self     // 只有当event.target是当前触发事件的元素时候才触发
        passive  // 事件的默认行为立即执行，无需等待事件回调执行完毕

        修饰符可以链式调用
    -->
    <div id="app">
        <a :href=`http://${url}` target="_blank" rel="noopener noreferrer" @click.prevent="show">跳转到尚硅谷</a>
        <hr>
        事件冒泡
        <div id="outer" @click="outer">
            <div id="inner" @click.stop.once="inner"></div>
        </div>
        <br>
        事件捕获
        <div id="outer" @click.capture="outer">
            <div id="inner" @click="inner"></div>
        </div>
        <input type="text" v-model="number" @keyup.enter="showNumber">
    </div>
    <script>
        Vue.config.productionTip = false

        new Vue({
            data(){
                return {
                    url:'www.guigu.com',
                    number:''
                }
            },
            methods:{
                show(){
                    alert('我是a标签行为')
                },
                inner(e){
                    
                    alert('内部事件')
                },
                outer(){
                    alert('外部事件')
                },
                showNumber(){
                    console.log(this.number);
                }
            }
        }).$mount('#app')
    </script>
</body>
</html>